<template>
  <div class="login_container">
    <div style="font-size:35px;color:white;text-align:center;">新生报到后台管理</div>
       <div class="login_box">
           <!-- 头像区域 -->
           <div class="avater_box">
               <img src="../assets/images/a.jpg" alt="">
           </div>
           <!-- 登陆表单区域 -->
           <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login_form">
               <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
                </el-form-item>
                <!-- 按钮区域 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="doLogin">登录</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>
           </el-form>
       </div>
   </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: '',
        authority:0
      },
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
        ]
      },
    }
  },
  methods:{
    //   发起登录
      doLogin(){
          var _this=this
          if(_this.loginForm.username==''||_this.loginForm.password==''){
              console.log('用户名或密码不能为空！')
          }else{
            var _this=this
            var url='http://taruinfo.work:8088/login'
            var data2=_this.loginForm
            _this.$axios.post(url,data2).then(function(res){
                console.log(res.data)
                if(res.data.code =="200"){
                  var token=res.data.data.token
                  var name=res.data.data.user.username
                  var studentId=res.data.data.user.studentId
                  var avatar=res.data.data.user.avatar
                  localStorage.setItem('touxiang', avatar)
                  localStorage.setItem('username', name)
                  localStorage.setItem('token', token)
                  localStorage.setItem('id', studentId)
                  _this.$message({
                    message: '登陆成功',
                    type: 'success'
                  })
                  _this.$router.push('/index')
                }else{
                    _this.$message({
                      message: '登陆失败',
                      type: 'error'
                    })
                }
          })
        }
      },
      resetLoginForm(){
        this.loginForm.username='',
        this.loginForm.password=''
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.login_container{
    background-color: #2b4b6b;
    height: 100%;
}

.login_box{
    width: 450px;
    height: 300px;
    background-color: #ffffff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

    .avater_box{
        height: 130px;
        width: 130px;
        border: 1px,solid #eeeeee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #ffffff;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eeeeee;
        }

    }
}
.login_form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
.btns{
    display: flex;
    justify-content: flex-end;
}
</style>
